<template>
  <div class>
    <el-popover width trigger="click" placement="top-start">
      <!-- <div slot="content"> -->
      <div v-if="ishistory == '历史'">
        <el-date-picker
          v-model="timerangarr"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
      </div>
      <el-radio-group v-model="ishistory">
        <el-radio-button label="实时"></el-radio-button>
        <el-radio-button label="历史"></el-radio-button>
      </el-radio-group>
      <!-- </div> -->
      <div slot="reference">
        <slot></slot>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: "timepick",
  components: {},
  data() {
    return {
      ishistory: "实时",
      pickerOptions: {
        shortcuts: [
          {
            text: "2020-1.16",
            onClick(picker) {
              const end = new Date(1579151160000);
              const start = new Date(1579150860000);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: [new Date(), new Date()],
      timerangarr: []
    };
  },
  computed: {},
  watch: {
    timerangarr: {
      handler: function(n, o) {
        // var g_his_stime = 1579104000000; //2020.01.16 13:01:00
        // var g_his_etime = 1579190399999; //2020.01.16 13:06:00 13:05:00有一条数据

        var g_his_stime = 1579150860000; //2020.01.16 13:01:00
        var g_his_etime = 1579151160000; //2020.01.16 13:06:00 13:05:00有一条数据
        if (this.timerangarr.length == 2) {
          this.$store.state.daping.timepick = this.timerangarr;
        } else {
          this.$store.state.daping.timepick = [
            new Date(g_his_stime),
            new Date(g_his_etime)
          ];
        }
        this.$message.success("修改时间范围成功");
      },
      immediate: true
    },
    ishistory: {
      handler: function(n, o) {
        //获取数据
        // var g_his_stime = 1579150860000; //2020.01.16 13:01:00
        // var g_his_etime = 1579151160000; //2020.01.16 13:06:00 13:05:00有一条数据
        //获取数据
        var g_his_stime = new Date().getTime(); //2020.01.16 13:01:00
        var g_his_etime = new Date().getTime(); //2020.01.16 13:06:00 13:05:00有一条数据

        this.$store.state.daping.ishistorytime = n;
        if (n == "历史") {
        } else {
          this.$store.state.daping.timepick = [
            new Date(g_his_stime),
            new Date(g_his_etime)
          ];
          this.$message.success("修改时间类型成功");
        }
      }
    }
  },
  mounted() {
    //设置默认值
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>